<template>
  <main class="scroll-container">
    <section class="sec-box fixed-top h-screen bg-black flex-sc home-mini">
      <article class="wow fadeIn">
        <h1>mini.</h1>
        <h1>The Next Big Wave in Functional Ultrasound (fUS) Imaging</h1>
        <button class="round primary margin-top-hight" @click.stop="$router.push({ path: '/product' })">Discover Mini-fUS</button>
      </article>
    </section>
    <section class="h-screen flex-cc">
      <article class="wow fadeInDown width text-center">
        <h6 class="gray">Mission</h6>
        <p class="margin-top fsLevel3">
          We are driven to democratize functional ultrasound (fUS) imaging, <br />making advanced neuroimaging accessible and enabling research into brain
          function, behavior,<br />
          and the development of next-generation Brain-Computer Interfaces.
        </p>
        <button class="link margin-top-middle" @click.stop="$router.push({ path: '/about' })">Learn More About Our Mission</button>
      </article>
    </section>
    <section class="h-screen home-intro">
      <article class="wow fadeInLeft padding">
        <h6 class="margin-bottom gray">INTRODUCING</h6>
        <p class="logo-box">
          <img :src="images.imgLogo" alt="logo" title="logo" />
          <span>Mini-fUS </span>
        </p>
        <h3 class="margin-top margin-bottom">Functional Ultrasound Imaging</h3>
        <aside class="fsLevel5">
          Miniaturized functional ultrasound (mini-fUS) is a portable neuroimaging device that maps brain activity in real-time by tracking cerebral blood flow
          changes.
        </aside>
        <button class="margin-top primary round" @click.stop="$router.push({ path: '/thundersTech' })">Explore mini-fUS Feature</button>
      </article>
    </section>
    <section class="home-scale min-h-screen">
      <section class="h-screen flex-sc">
        <article class="wow fadeInLeft">
          <h3 class="margin-top">Adjustable</h3>
          <aside>
            It enables portable, high-resolution brain imaging in real-time, <br />expanding access to neuroscience research and clinical diagnostics in diverse
            settings,<br />including freely behaving subjects and resource-limited environments.
          </aside>
        </article>
      </section>
      <section class="h-screen flex-sc">
        <article class="wow fadeInRight">
          <h3>Miniaturized</h3>
          <aside>
            It enables portable, high-resolution brain imaging in real-time, <br />expanding access to neuroscience research and clinical diagnostics in diverse
            settings,<br />including freely behaving subjects and resource-limited environments.
          </aside>
        </article>
      </section>
      <section class="h-screen flex-sc">
        <article class="wow fadeInLeft">
          <h3>Integrated storage compartment</h3>
          <aside>
            It designed to securely organize and protect ultrasound probes, <br />ensuring easy accessibility, portability, and streamlined workflow during
            clinical or field use.
          </aside>
        </article>
      </section>
      <section class="h-screen flex-sc">
        <article class="wow fadeInRight">
          <h3>Cooling</h3>
          <aside>
            It designed to securely organize and protect ultrasound probes, <br />ensuring easy accessibility, portability, and streamlined workflow during
            clinical or field use.
          </aside>
        </article>
      </section>
      <div class="productIntroScle"></div>
    </section>
    <section class="flex-cc h-screen bg-black home-thunders-tech">
      <article class="width text-center wow fadeInDown">
        <h6 class="gray">Thunders Tech</h6>
        <h3 class="margin-top">The world’s smallest functional ultrasound imaging</h3>
        <p class="margin-top">
          Our innovative approach combines high-resolution imaging capabilities,<br />
          an advanced and compact system architecture, and powerful GPU-accelerated processing to deliver exceptional results.
        </p>
        <button class="margin-top-middle round primary" @click.stop="$router.push({ path: '/thundersTech' })">Dive into ThundersTech</button>
        <h2 class="margin-top-hh">Powering Diverse Research Applications</h2>
      </article>
    </section>
    <section class="home-product-dl min-h-screen flex-cc">
      <div class="clearfloat">
        <dl>
          <dt></dt>
          <dd class="title">Neuropharmacology</dd>
          <dd class="desc">Investigate drug effects on brain activity and hemodynamics.</dd>
        </dl>
        <dl>
          <dt></dt>
          <dd class="title">Functional Neuroimaging</dd>
          <dd class="desc">Map brain activity during sensory, motor, and cognitive tasks.</dd>
        </dl>
        <dl>
          <dt></dt>
          <dd class="title">Clinical Research</dd>
          <dd class="desc">Explore translational applications and BCI development.</dd>
        </dl>
        <dl>
          <dt></dt>
          <dd class="title">Vascular Imaging</dd>
          <dd class="desc">Visualize and quantify cerebral blood flow and vasculature.</dd>
        </dl>
      </div>
      <button class="normal margin-top margin-bottom-middle" @click.stop="$router.push({ path: '/application' })">See All Applications</button>
    </section>
    <section class="home-concat min-h-screen bg-gray">
      <div class="header">
        <h2>News</h2>
        <button class="gray" @click.stop="$router.push({ path: '/news' })">See More News</button>
      </div>
      <div class="width home-news-swiper-container">
        <Swiper :slidesPerView="'auto'" :spaceBetween="30">
          <SwiperSlide v-for="(item, index) in newsList" :key="index">
            <dl class="new-event-dl" @click.stop="doDetail(item)">
              <dt>
                <img v-if="item.imageUrl" width="100%" :src="item.imageUrl" />
              </dt>
              <dd class="margin-top margin-bottom">
                <h3>{{ item.title || "" }}</h3>
              </dd>
              <dd>{{ item.alt || "" }}</dd>
            </dl>
          </SwiperSlide>
        </Swiper>
      </div>
    </section>
  </main>
</template>
<script>
import HttpServer from "@/utils/http"
import { newsManageAPI } from "@/config/api"
import { NewsCategory, NewsUrlCategory } from "@/constants/news"

import { Swiper, SwiperSlide } from "swiper/vue"
import imgLogo from "@images/logo.png"
import imgProductBg1 from "@images/mini-fUS.png"

export default {
  name: "homePage",
  components: { Swiper, SwiperSlide },
  data() {
    return {
      images: {
        imgLogo,
        imgProductBg1,
      },
      newsList: [],
    }
  },
  created() {
    this.queryData()
  },
  mounted() {
    new this.$wow.WOW().init()
    window.addEventListener("scroll", this.initScroll)
  },
  destroyed() {
    window.removeEventListener("scroll", this.initScroll)
  },
  methods: {
    initScroll() {
      const scrollTop = parseInt(window.scrollY)

      const preEl = document.querySelector(".home-intro")
      const homeScale = document.querySelector(".home-scale")

      //console.log(scrollTop, homeScale.offsetTop)

      if (scrollTop >= preEl.offsetTop + 500 && scrollTop <= homeScale.offsetTop + homeScale.clientHeight - 650) {
        if (scrollTop >= homeScale.offsetTop + homeScale.clientHeight) {
          return
        }
        document.querySelector(".productIntroScle").classList.add("show")
      } else {
        document.querySelector(".productIntroScle").classList.remove("show")
      }
    },
    async queryData() {
      const { code, data } = await HttpServer.get(newsManageAPI.getList, {
        current: 1,
        size: 10,
        title: "",
        category: NewsCategory.Pub.value,
      })
      if (code == 200) {
        this.newsList = data.records.filter((i) => i.category != NewsCategory.Event.value).slice(0, 5)
      }
    },
    doDetail(item) {
      if (item.urlType == NewsUrlCategory.self.value) {
        this.$router.push({
          path: `/news/${item.id}`,
        })
      } else {
        if (item.url) window.open(item.url)
      }
    },
  },
}
</script>
<style lang="less" scoped>
.home-mini {
  padding: 0 @pre-padding;
  background-image: radial-gradient(rgba(255, 255, 255, 0.25) 1%, transparent 10%);
  background-size: 1.8rem 1.8rem;

  article {
    width: 65%;
    max-width: 100rem;
  }
}

.home-intro {
  background: @borderColor url("@images/mini-fUS.png") 40% / cover no-repeat;

  & > article {
    flex: none;
    width: 40%;
  }

  .logo-box {
    img {
      display: inline-block;
      margin-right: calc(@normal / 3);
      width: 40px;
    }

    span {
      font-size: @fsLevel3;
      font-weight: 700;
      color: @black;
    }
  }
}

.home-scale {
  display: flex;
  flex-direction: column;
  background: @borderColor;
  & > section {
    &:nth-child(even) {
      text-align: right;
    }
  }
  article {
    z-index: 10;
    position: relative;
    padding-left: @pre-padding;
    width: 45%;

    h3 {
      margin-bottom: @normal;
    }

    aside {
      font-size: @fsLevel5;
    }
  }

  .productIntroScle {
    overflow: hidden;
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 100vh;
    background: #ddd url("@images/mini-fUS.png") 0 / cover no-repeat;
    background-position: 80% 100%;
    background-size: 80%;
    transition: all 0.3s;
    &.show {
      display: block;
      opacity: 1;
    }
  }
}

.home-product-swiper {
  .swiper {
    z-index: 10;
    position: relative;
    width: 100%;
  }

  .swiper-slide {
    img {
      width: 100%;
    }

    & > div {
      position: relative;
    }

    article {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: @normal * 2 @normal * 3;
      background: @basicColor;

      h3 {
        margin-bottom: calc(@normal / 2);
      }

      p {
        padding-bottom: calc(@normal / 2);
      }
    }
  }

  /deep/.swiper-button-next {
    right: var(--swiper-navigation-sides-offset, 26px);
  }
}

@media (max-width: 1000px) {
  .home-product-swiper {
    padding: @normal*2 0;
    height: auto !important;
    min-height: auto !important;

    article {
      position: initial !important;
      width: auto !important;
    }

    /deep/.swiper-button-next {
      right: var(--swiper-navigation-sides-offset, 10px);
    }
  }
}

.home-thunders-tech {
  background: linear-gradient(to bottom, #000, #666, #fff);
}

.home-product-dl {
  overflow: hidden;
  flex-direction: column;
  padding: @normal 0;

  & > div {
    margin: auto;
    max-width: 100rem;
  }

  dl {
    box-sizing: border-box;
    padding: 1%;
    width: 50%;
    float: left;
  }

  dt {
    min-height: 20rem;
    max-height: 24rem;
    background-color: #666;

    img {
      width: 100%;
    }
  }

  dd {
    &.title {
      padding: calc(@normal / 2) 0;
      font-weight: 700;
      font-size: @fsLevel4;
      line-height: @fsLevel3 * 1;
    }

    &.desc {
      font-size: @fsLevel5;
      line-height: @fsLevel5 * 1.2;
    }
  }
}

.home-concat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: @pre-padding 0;
  color: #000;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    width: 90%;
  }
  .swiper-slide {
    width: auto;
  }
  .new-event-dl {
    cursor: pointer;
    width: 40rem;
    min-height: 30rem;
  }
  dl {
    h3 {
      font-size: @fsLevel4;
      font-weight: 500;
    }
    dt {
      overflow: hidden;
      height: 24rem;
      & > img {
        width: 100%;
        min-height: 100%;
      }
    }
    dd {
      font-size: @fsLevel5;
    }
  }
}
</style>
